Vue.component("mymain", {
    data(){
        return {
            user:null,
            category: {}
        };
    },
    template:`
<div>
    <login ref="lg" base-url="/TN-USER" @logined="onlogin"></login>
    <header class="header">
        <nav class="navbar navbar-default" id="navbar">
            <div class="container">
                <div class="header-topbar hidden-xs link-border">
                    <ul class="site-nav topmenu" style="margin-top: 10px">
                         <li v-if="user" class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" rel="nofollow">我的 <span class="caret"></span></a>
                             <ul class="dropdown-menu header-topbar-dropdown-menu">
                                  <li><a href="collect.html"><i class="el-icon-star-on"></i> 我的收藏</a></li>
                                  <li><a href="concern.html" rel="nofollow"><i class="el-icon-success"></i> 我的关注</a></li>
                                  <li><a data-toggle="modal" data-target="#areDeveloping" rel="nofollow"><i class="el-icon-present"></i> 我的积分</a></li>
                             </ul>
                         </li>
                     </ul>
                    <span v-if="user" style="display: flex">
                        <div class="block" style="cursor: pointer" @click="goPersonalHtml(user.id)">
                            <el-avatar :size="30" :src="user.image"></el-avatar>
                        </div>
                        <div style="margin-top: 10px; margin-left: 10px;">
                            欢迎{{user.userName}}
                            <a href="" @click.prevent="showPwdWin">修改密码</a>
                            <a href="houseEdit.html">发布房源</a>
                            <a href="" @click.prevent="logout">退出</a>
                        </div>
                    </span>
                    <spen v-else style="display: flex">
                        <div class="block" style="cursor: pointer" @click.prevent="showLoginWin">
                            <el-avatar :size="30" icon="el-icon-user-solid"></el-avatar>
                        </div>
                        <div style="margin-top: 10px; margin-left: 10px;">
                            <a href="" @click.prevent="showLoginWin">Hi,请登录</a>
                            <a href="" @click.prevent="showRegWin">我要注册</a>&nbsp;&nbsp;
                            <a href="" @click.prevent="showForgetWin">忘记密码</a>
                        </div>
                    </spen>
                </div>
               <div class="navbar-header">
                 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-navbar" aria-expanded="false"> <span class="sr-only"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
                 <h1 class="logo hvr-bounce-in"><a href="/" title=""><img src="images/img.png" alt="" style="height: 88px"></a></h1>
               </div>
                <div class="widget widget_search">
                    <form class="navbar-form" action="/Search" method="post">
                        <div class="input-group" style="float: right; margin-top: 20px">
                            <input type="text" name="keyword" class="form-control" size="35" placeholder="请输入关键字" maxlength="15" autocomplete="off">
                            <span class="input-group-btn">
                                 <button class="btn btn-default btn-search" name="search" type="submit">搜索</button>
                            </span> 
                        </div>
                    </form>
                </div>
               <div class="collapse navbar-collapse" id="header-navbar">
                 <form class="navbar-form visible-xs" action="/Search" method="post">
                    <div class="input-group">
                     <input type="text" name="keyword" class="form-control" placeholder="请输入关键字" maxlength="20" autocomplete="off">
                     <span class="input-group-btn">
                     <button class="btn btn-default btn-search" name="search" type="submit">搜索</button>
                    </div>
                 </form>
               </div>
            </div>
         </nav>
    </header>
    <section class="container">
        <slot></slot>
    </section>
    <footer class="footer">
        <div class="container">
            <p>&copy; 2016 <a href="">ylsat.com</a> &nbsp; <a href="http://www.miitbeian.gov.cn/" target="_blank"
                                                              rel="nofollow">豫ICP备20151109-1</a> &nbsp; <a
                    href="sitemap.xml" target="_blank" class="sitemap">网站地图</a></p>
        </div>
        <div id="gotop"><a class="gotop"></a></div>
    </footer>
</div>    
    `,
    created(){

    },
    methods:{
        showLoginWin() {
            this.$refs.lg.openLoginWin();
        },
        onlogin(user) {
            console.log(user)
            this.user = user;
            this.$emit("logined", user);
        },
        logout() {
            this.$refs.lg.logout();
        },
        showRegWin(){
          this.$refs.lg.openRegWin();
        },
        showPwdWin() {
            this.$refs.lg.openPwdWin();
        },
        showForgetWin() {
            this.$refs.lg.openForgetWin();
        },
        goCategoryHtml(categoryId){
            localStorage.setItem("categoryId",categoryId);
            location.href = "category.html";
        },
        goPersonalHtml(userId){
            localStorage.setItem("userId", userId);
            location.href = "personalPage.html";
        },
    }
})